<template>
  <div>
    <Child :persons="persons">
      <template slot-scope="scope">
        <div>
          <span>{{scope.row.name}}</span>&nbsp;&nbsp;
          <span>{{scope.row.address}}</span>&nbsp;&nbsp;
          <span :style="{color : scope.row.age > 18 ? 'green' : 'red'}">{{scope.row.age > 18 ? '成年' : '未成年'}}</span>
        </div>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  components: {
    Child
  },
  data() {
    return {
      persons: [
        { id: 1001, name: "张三", age: 15, address: "深圳" },
        { id: 1002, name: "李四", age: 20, address: "广州" },
        { id: 1003, name: "王五", age: 12, address: "上海" }
      ]
    };
  }
};
</script>
